import React, {Component} from 'react';
import './TopFlag.less'

class TopFlag extends Component {
    constructor(props) {
        super(props);
        this.state={
            playList:[]
        }
    }

    componentDidMount() {
        if(this.props.list.length>0){
            this.props.list.map(function(item,index){
                item.playlist.tracks.length=10;
                return item;
            })
        }
    }

    render() {

        return (
            <div>
                {/*榜单*/}
                <div className='n-rcmd'>
                    <div className='v-hd2'>
                        <div className='circle'>
                            <span></span>
                        </div>
                        <h2>{this.props.title}</h2>
                        <span className='more'>
                更多
                </span>
                    </div>
                    <ul className='n-bilst'>
                        {
                            this.props.list.length>0?
                                this.props.list.map((item,index)=>{
                                return(
                                    <li key={index}>
                                        <div>
                                            <img
                                                src={item.playlist.coverImgUrl}
                                                alt=""/>
                                            <div>
                                                <h2>{item.playlist.name}</h2>
                                            </div>
                                        </div>
                                        <ul>
                                            {
                                                item.playlist.tracks.map((element,idx)=>{
                                                    // if (idx<10)
                                                    return(
                                                        <li className='z-hvr' key={idx}>
                                                            {
                                                                idx<3?
                                                                    <span className='index top'>{idx+1}</span>
                                                                    :
                                                                    <span className='index'>{idx+1}</span>
                                                            }
                                                            <span className='name'>{element.name}</span>
                                                            <div className={'oper'}>
                                                                <i className={'iconfont'}>&#xe626;</i>
                                                                <i className={'iconfont'}>+</i>
                                                                <i className={'iconfont'}>&#xe67b;</i>
                                                            </div>
                                                        </li>
                                                    )
                                                })
                                            }
                                            <li className='z-hvr'>
                                                <span>查看全部</span>
                                            </li>
                                        </ul>
                                    </li>
                                )
                            })
                                :
                                <li>
                                        <div>
                                            <img
                                                src="http://p4.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=100y100"
                                                alt=""/>
                                            <div>
                                                <h2>云音乐飙升榜</h2>
                                            </div>
                                        </div>
                                        <ul>
                                            <li className='z-hvr'>
                                                <span className='index top'>1</span>
                                                <span className='name'>这个大叔不太冷</span>
                                                <div className={'oper'}>
                                                    <i className={'iconfont'}>&#xe626;</i>
                                                    <i className={'iconfont'}>+</i>
                                                    <i className={'iconfont'}>&#xe67b;</i>
                                                </div>
                                            </li>
                                            <li className='z-hvr'>
                                                <span className='index'>2</span>
                                                <span className='name'>这个大叔不太冷</span>
                                            </li>
                                            <li className='z-hvr'>
                                                <span className='index'>3</span>
                                                <span className='name'>这个大叔不太冷</span>
                                            </li>
                                            <li className='z-hvr'>
                                                <span className='index'>4</span>
                                                <span className='name'>这个大叔不太冷</span>
                                            </li>
                                            <li className='z-hvr'>
                                                <span className='index'>5</span>
                                                <span className='name'>这个大叔不太冷</span>
                                            </li>
                                            <li className='z-hvr'>
                                                <span className='index'>5</span>
                                                <span className='name'>这个大叔不太冷</span>
                                            </li>
                                            <li className='z-hvr'>
                                                <span className='index'>5</span>
                                                <span className='name'>这个大叔不太冷</span>
                                            </li>
                                            <li className='z-hvr'>
                                                <span className='index'>5</span>
                                                <span className='name'>这个大叔不太冷</span>
                                            </li>
                                            <li className='z-hvr'>
                                                <span className='index'>5</span>
                                                <span className='name'>这个大叔不太冷</span>
                                            </li>
                                            <li className='z-hvr'>
                                                <span className='index'>5</span>
                                                <span className='name'>这个大叔不太冷</span>
                                            </li>
                                            <li className='z-hvr'>
                                                <span>查看全部</span>
                                            </li>
                                        </ul>
                                    </li>
                        }

                    </ul>
                </div>
            </div>
        );
    }
}

export default TopFlag;